import IconDouyin from '@/components/icon/IconDouyin';
import { selectMonitorLinkage } from '@/services/api/api-monitor-linkage';
import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, SendOutlined, StopOutlined } from '@ant-design/icons';
import { ModalForm, ProCard, ProFormRadio, ProFormText, ProFormTextArea, ProList } from '@ant-design/pro-components';
import { DrawerForm } from '@ant-design/pro-form';
import { Button, Col, Descriptions, Row, Select, Space, Spin, Tag, Typography, message } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import { Miscalculation } from './ActionsMonitorLinkage';
interface DetailMonitorLinkageProps {
    data: MonitorLinkageData.LinkagePage;
    onRefurbish: () => void;
}

const DetailMonitorLinkage: React.FC<DetailMonitorLinkageProps> = ({ data, onRefurbish }) => {
    const access = useAccess();
    const Ref = useRef(null);
    const [loading, setLoading] = useState(false);

    const [details, setDetailDataState] = useState<MonitorLinkageData.LinkageSelect>();

    const [sensitives, setSensitives] = useState([])
    const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

    const getDetailData = async () => {
        const response = await selectMonitorLinkage({ id: data.id });

        if (response.code == 0) {
            setDetailDataState(response.data);
            setSensitives(response.data?.sensitives)
        }
    }

    return (
        <DrawerForm
            key="details_details_drawer_form"
            title={details?.title}
            drawerProps={{
                destroyOnClose: true,
                width: 900,
            }}
            trigger={
                <a>
                    <Tag
                        icon={data?.isViolation == 0 ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
                        color={data?.isViolation == 0 ? 'success' : 'error'}
                    >
                        {data?.isViolation == 0 ? '正常' : '风险'}
                    </Tag>
                    <Tag
                        icon={data?.isViolation == 0 ? <StopOutlined /> : <ExclamationCircleOutlined />}
                        color={data?.isViolation == 0 ? 'warning' : '#f50'}
                    >
                        {data?.isViolation == 0 ? '退回' : '误判'}
                    </Tag>
                    {data?.content}
                </a>
            }
            onOpenChange={async (visible) => {
                if (visible) {
                    console.log('=================', data);
                    getDetailData()
                } else {
                    onRefurbish()
                }
            }}
        // submitter={{
        //     submitButtonProps: {
        //         style: {
        //             display: 'none',
        //         },
        //     },
        //     render: (props, defaultDoms) => {
        //         return [
        //             // defaultDoms,
        //             <Miscalculation onClose={onRefurbish} type='botton' />
        //         ];
        //     },
        // }}
        >
            <Spin
                style={{
                    textAlign: 'center',
                }}
                spinning={details === undefined}
            >
                {details !== undefined && (
                    <div style={{ overflow: 'hidden' }}>
                        <Row gutter={16}>
                            <Col span={10}>
                                {/* <div style={{ display: 'flex', marginBottom: 10 }}>
                  <IconDouyin width={20} height={20} />
                  <div style={{ alignItems: 'center', marginLeft: 10 }}> {details?.sourceName}</div>
                </div> */}
                                <video
                                    ref={Ref}
                                    hidden={loading}
                                    style={{
                                        width: '100%',
                                        height: 500,
                                    }}
                                    controls
                                    src={details?.sourceObjectUrl}
                                // src='https://s33.aconvert.com/convert/p3r68-cdx67/9dmah-sj11g.mp4'
                                />
                                <Descriptions>
                                    <Descriptions.Item label="文章标题">{details?.content}</Descriptions.Item>
                                </Descriptions>

                                <Descriptions>
                                    <Descriptions.Item label="发布账号">
                                        <div style={{ display: 'flex', marginBottom: 10 }}>
                                            <IconDouyin width={20} height={20} />
                                            <div style={{ alignItems: 'center', marginLeft: 10 }}> {details?.sourceName}</div>
                                        </div>
                                    </Descriptions.Item>
                                </Descriptions>
                                <Descriptions>
                                    <Descriptions.Item label="发布单位">{details?.sourceOrganizationName}</Descriptions.Item>
                                </Descriptions>
                                <Descriptions>
                                    <Descriptions.Item label="发布时间">{details?.createdTime}</Descriptions.Item>
                                </Descriptions>
                                <Descriptions>
                                    <Descriptions.Item label="原文链接"><a href={details?.sourceUrl} target="_blank">{details?.sourceUrl} </a></Descriptions.Item>
                                </Descriptions>
                            </Col>
                            <Col span={14} style={{
                                maxHeight: '650px', overflow: "auto", overflowX: 'hidden',
                                overflowY: 'scroll',
                                marginTop: 10,
                                scrollbarWidth: 'none',
                            }} >
                                <ProFormRadio.Group
                                    name="levelId"
                                    radioType="button"
                                    initialValue={'all'}
                                    options={[
                                        { label: '全部', value: 'all' },
                                        { label: '人像', value: 'p' },
                                        { label: '音频', value: 'a' },
                                    ]}
                                    fieldProps={{
                                        onChange: (e) => {
                                            let value = e.target.value
                                            if (value === "p") {
                                                const list = details?.sensitives && details?.sensitives.filter((item) => item?.type === 'p')
                                                setSensitives(list)
                                            }
                                            else if (value === "a") {
                                                const list = details?.sensitives && details?.sensitives.filter((item) => item?.type === 'a')
                                                setSensitives(list)
                                            }
                                            else {
                                                setSensitives(details.sensitives)
                                            }
                                        },
                                    }}
                                />
                                <ProList<any>

                                    ghost
                                    dataSource={sensitives}
                                    pagination={false}
                                    itemLayout="vertical"
                                    onItem={(Linkage: any) => {
                                        return {
                                            onClick: () => {
                                                if (Ref) {
                                                    // 假设Linkage.appearTime是一个时间字符串，比如"00:50"
                                                    let convertedTime = moment(Linkage.appearTime, "MM:ss").format("HH:mm:ss");
                                                    let time = moment(convertedTime, "HH:mm:ss");

                                                    let timestamp = time.diff(moment().startOf('day'), 'seconds');

                                                    Ref.current.currentTime = timestamp;

                                                    let duration = moment.duration(timestamp, 'seconds');
                                                    let hours = duration.hours();
                                                    let minutes = duration.minutes();
                                                    let seconds = duration.seconds();

                                                    message.success(
                                                        `跳转到 ${moment()
                                                            .set('hour', hours)
                                                            .set('minute', minutes)
                                                            .set('second', seconds)
                                                            .format('HH:mm:ss')}`,
                                                    );
                                                }
                                            },
                                        };
                                    }}
                                    metas={{
                                        title: {
                                            render: (dom: React.ReactNode,
                                                item: any,
                                                index: number,
                                                action,) => (
                                                item.person?.name ? <div style={{ fontSize: 15 }}>{item.person?.name}</div> : <div style={{ fontSize: 15 }}>音频链接</div>
                                            ),
                                        },
                                        extra: {
                                            render: (dom: React.ReactNode,
                                                item: any,
                                                index: number,
                                                action) => (
                                                item.person?.pictureUrl ? <img
                                                    width={152}
                                                    height={100}
                                                    alt="图片"
                                                    src={item.person?.pictureUrl}
                                                /> : <></>
                                            ),
                                        },
                                        description: {
                                            render: (
                                                dom: React.ReactNode,
                                                item: any,
                                                index: number,
                                                action,
                                            ) => {
                                                let convertedTime = moment(item.appearTime, "MM:ss").format("HH:mm:ss");
                                                let time = moment(convertedTime, "HH:mm:ss");
                                                return <>
                                                    <Space size={1}>
                                                        {item.person?.similarity && <Tag >对比率：{item.person?.similarity}</Tag>}
                                                    </Space>
                                                    <Tag>
                                                        定位：
                                                        {moment(time).format('HH:mm:ss')}
                                                    </Tag>
                                                </>
                                            }

                                        },
                                        content: {
                                            render: (
                                                dom: React.ReactNode,
                                                item: any,
                                                index: number,
                                                action,
                                            ) => {
                                                return (
                                                    <Typography >
                                                        <Typography.Text type="secondary">
                                                            {item.person?.position}
                                                            {item.audio?.content}
                                                        </Typography.Text>
                                                    </Typography>
                                                );
                                            },
                                        },
                                    }}
                                />
                            </Col>
                        </Row>

                    </div>
                )}
            </Spin>
        </DrawerForm>
    );
};

export default DetailMonitorLinkage;
